<template>
  <div class="goods">
    <van-nav-bar title="商品详情" left-arrow @click-left="backUp" />
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="(item,index) in commodityDto.goods_image" :key="index">
        <img :src="item" />
      </van-swipe-item>
    </van-swipe>

    <van-cell-group>
      <van-cell>
        <div class="goods-title">{{ commodityDto.goods_name }}</div>
        <div class="goods-price">&yen;{{ commodityDto.goods_price }}</div>
      </van-cell>
      <van-cell class="goods-express">
        <van-col span="8">运费：包邮</van-col>
        <van-col span="8">已售：{{ commodityDto.goods_sales }}</van-col>
        <van-col span="8">剩余：{{ commodityDto.stock_num }}</van-col>
      </van-cell>
    </van-cell-group>

    <van-tabs v-model="active" animated color="#FBA86F">
      <van-tab title="商品详情">
        <div class="html" v-html="commodityDto.goods_desc">
          <!-- <img v-for="item in DetailsList" :src="url+item.url" :key="item.imageId" /> -->
        </div>
      </van-tab>
      <van-tab title="用户评价">
        <ul class="comment" v-if="goods_comment.length!=0">
          <li v-for="item in goods_comment" :key="item.user_id">
            <div>
              <img class="avatar" :src="item.avatar" />
              <span class="name">{{item.nick_name}}</span>
              <span class="time">{{item.time}}</span>
            </div>
            <p>{{item.content}}</p>
            <img class="img" v-for="(url,index) in item.picture" :key="index" :src="url" alt />
          </li>
        </ul>
        <p v-else class="no-comment">该商品暂无用户评论~</p>
      </van-tab>
    </van-tabs>

    <van-popup v-model="showSku" position="bottom">
      <div class="sku">
        <div class="sku-top">
          <img :src="currentSku.goods_cover" />
          <div class="sku-text">
            <p class="name">{{currentSku.goods_name}}</p>
            <p class="price">¥{{currentSku.goods_price}}</p>
            <!-- <p class="inventory">库存{{currentSku.cInventory}}件</p> -->
          </div>
        </div>
        <p style="padding: 10px 20px;">{{spec_name}}</p>
        <ul class="sku-list">
          <li
            v-for="(item,index) in spec_value"
            :key="index"
            :class="{'active':current==index}"
            @click="clickSku(index)"
          >{{item.spec_value_name}}</li>
        </ul>
        <!-- <div class="stepper" v-if="buy_type=='cart'">
          <span>购买数量</span>
          <van-stepper v-model="num" max="99" integer />
        </div>-->
        <button @click="comfirm">确定</button>
      </div>
    </van-popup>

    <van-goods-action class="goods-action">
      <van-goods-action-mini-btn
        :icon="isStar?'star':'star-o'"
        :style="{'color': isStar ? '#FBA86F': '#7d7e80'}"
        @click="onClickStar"
      >收藏</van-goods-action-mini-btn>
      <van-goods-action-mini-btn icon="cart-o" @click="onClickCart">购物车</van-goods-action-mini-btn>
      <van-goods-action-big-btn @click="clickShowSku('cart')">加入购物车</van-goods-action-big-btn>
      <van-goods-action-big-btn primary @click="clickShowSku('buy')">立即购买</van-goods-action-big-btn>
    </van-goods-action>
  </div>
</template>

<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  Toast,
  Skeleton,
  SwipeItem,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn,
  Popup,
  Stepper,
  Tabs,
  Tab
} from "vant";
import api from "@/utils/api";
export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn,
    [Popup.name]: Popup,
    [Stepper.name]: Stepper,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
  },
  data() {
    return {
      commodityDto: {}, // 商品信息
      spec_name: "",
      spec_value: [], //sku数组
      currentSku: {}, //当前sku
      showSku: false,
      isStar: false,
      current: 0,
      buy_type: "",
      num: 1,
      active: 0, //切换商品详情和用户评价
      goods_comment: [] //评论列表
    };
  },
  mounted() {
    this.getCommodityDetails();
  },
  methods: {
    // 商品详情
    getCommodityDetails() {
      this.$axios({
        method: "get",
        url: api.goodsdetail,
        params: {
          token: localStorage.getItem("token"),
          goods_id: this.$route.query.goods_id
        }
      }).then(res => {
        console.log(res);
        this.commodityDto = res;
        this.spec_name = res.goods_spec.spec_name;
        this.spec_value = res.goods_spec.spec_value;
        this.goods_comment = res.goods_comment;
        this.isStar = res.is_favour;
      });
    },
    comfirm() {
      if (this.buy_type == "cart") {
        this.insertCart();
      } else if (this.buy_type == "buy") {
        this.toBuy();
      }
    },
    // 加入购物车
    insertCart() {
      this.$axios({
        method: "POST",
        url: api.addcart,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          goods_id: this.commodityDto.goods_id,
          spec_value_id: this.currentSku.spec_value_id
        })
      }).then(res => {
        this.$toast("添加成功");
        this.showSku = false;
      });
    },
    // 直接购买
    toBuy() {
      console.log("buy");
      this.$router.push({
        name: "orderconfirm",
        query: {
          buy_type: "buy",
          goods_id: this.commodityDto.goods_id,
          spec_value_id: this.currentSku.spec_value_id
        }
      });
    },
    clickShowSku(buy_type) {
      this.showSku = true;
      this.currentSku = this.spec_value[this.current ? this.current : 0];
      this.buy_type = buy_type;
    },
    // 切换sku
    clickSku(index) {
      this.current = index;
      let sku = this.spec_value[index];
      this.currentSku = sku;
    },
    onClickStar() {
      this.$axios({
        method: "POST",
        url: api.update,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          goods_id: this.commodityDto.goods_id
        })
      }).then(res => {
        this.isStar = !this.isStar;
      });
    },
    onClickCart() {
      this.$emit("changeActiveBar", 2);
      this.$router.push("/cart");
    },
    backUp() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
@import "~style/common.less";
.goods {
  padding-bottom: 50px;
  &-swipe {
    img {
      width: 100%;
      display: block;
    }
  }
  &-title {
    font-size: 16px;
  }
  &-price {
    color: #f44;
  }
  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }
  &-cell-group {
    // margin: 10px 0;
    .van-cell__value {
      color: #999;
    }
  }
  &-tag {
    margin-left: 5px;
  }
  &-action {
    z-index: 99;
  }
  .comment {
    background-color: #fff;
    font-size: 14px;
    li {
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }
    .avatar {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .time {
      font-size: 12px;
      float: right;
      margin-top: 8px;
    }
    p {
      padding: 10px;
    }
    .img {
      border-radius: 10px;
      width: 32%;
      height: 120px;
      margin-right: 1%;
    }
  }
  .no-comment {
    font-size: 14px;
    padding: 10px 15px;
    background-color: #fff;
  }
  .sku {
    padding: 20px 10px;
    font-size: 14px;
    color: #333;
    .sku-top {
      display: flex;
      align-items: center;
      img {
        width: 150px;
        height: 120px;
      }
      .sku-text {
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        font-size: 15px;
        .name {
          color: #030303;
        }
        .price {
          color: @priColor;
        }
        .inventory {
          color: #666;
        }
      }
    }
    .sku-list {
      padding: 10px 0;
      display: flex;
      flex-wrap: wrap;
      li {
        margin: 8px 2%;
        flex-basis: 45%;
        line-height: 30px;
        text-align: center;
        border-radius: 20px;
        font-size: 15px;
        border: 1px solid #333;
      }
      li.active {
        color: #fff;
        border: 1px solid @priColor;
        background-color: @priColor;
      }
    }
    .stepper {
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    button {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 20px;
      color: #fff;
      font-size: 15px;
      background-color: @priColor;
      border: 0px;
      outline: none;
    }
  }
}
</style>

<style lang="less">
.html {
  width: 100%;
  p {
    width: 100%;
  }
  img {
    display: block;
    width: 100% !important;
  }
}
</style>